<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancel">取消</button>
        <input type="text" v-model="num">
        <h1> {{name}}, 非常帅，有 {{num}} 个人为他点赞 </h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 1.声明式渲染
        // 2.双向绑定，模型变化，视图变化，反之亦然
        // 3.事件绑定
        let vm = new Vue({
            // 指定元素
            // 每个 Vue 实例都需要关联一段 Html 模板，Vue 会基于此模板进行视图渲染。我们可以通过 el 属性来指定。
            el: "#app",
            // 指定数据
            // 当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监视 data 中的属性变化，
            // 当 data 发生改变，所有相关的视图都将重新渲染，这就是"响应式"系统。
            data: {
                name: "张三",
                num: 1
            },
            methods: {
                cancel:function(){
                    this.num--;
                }
            },
        })

        // 4.使用 Vue 
        //     4.1. 创建 Vue 实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式
        //     4.2. 指令来简化对 dom 的一些操作
        //     4.3. 声明方法来做更复杂的操作，methods 里面可以封装方法
    </script>
</body>
</html>